<template>
  <div class="footCont">
    <div @click="footfn(item)" :class="$route.path==item.url?'footItem_active':'footItem'" :key="index" v-for="(item,index) in footArr">
      <img :src="item.icon" />
      <div class="footVal">{{item.val}}</div>
    </div>
  </div>
</template>

<script>

    export default {
        components: {},
        data() {
            return {
              footArr:[
                {url:'/home',val:'挂号',icon:"https://localbird.oss-cn-chengdu.aliyuncs.com/uploads/images/20240612/07fd4dbf96c9a277e2ac667ee36ff045ffbc23e1.png",active:false,showNum:false},
                {url:'/order',val:'记录',icon:"https://localbird.oss-cn-chengdu.aliyuncs.com/uploads/images/20240612/2a73ea015c69e741b17be01d644ba029ffb3fc2d.png",active:false,showNum:true},
                {url:'/msg',val:'消息',icon:"https://localbird.oss-cn-chengdu.aliyuncs.com/uploads/images/20240612/af5c0d54cf72bd7e08aaa854c00d4510bf1a432c.png",active:false,showNum:true},
                {url:'/user',val:'就诊卡',icon:"https://localbird.oss-cn-chengdu.aliyuncs.com/uploads/images/20240612/cbbfc7798fd1802d40047ce85b6813b0447832c7.png",active:true,showNum:false},
              ],
            }
        },
        props: {},
        methods: {
          footfn(item){
            this.$router.replace({path:item.url})
          },
        },
        mounted() {
        },
        created() {
        },
    }
</script>

<style scoped lang="less">
  .footCont{
    width: 100%;
    position: fixed;
    left: 0;
    z-index: 102;
    bottom: -1px;
    background-color: #fff;
    // border-top: 1px solid #ebebeb;
    // box-shadow: 0 -0.1rem 0.5rem #ebebeb;
    display: flex;
    justify-content: space-between;
    .footItem,.footItem_active{
      width: 50%;
      height: 3rem;
      display: flex;
      align-items: center;
      flex-direction: column;
      color: #999;
      justify-content: center;
      position: relative;
      img{
        width: 1.5rem;
      }
      .footVal{
        font-size: 0.6rem;
        margin-top: 0.1rem;
      }
    }
    .footItem_active{
      color: #5cc78e;
    }
  }
</style>
